<template>
  <div class="lunbo-edit">
    <el-tabs v-model="activeName">
      <el-tab-pane label="编辑" name="1">
        <div class="subhead">
          <p>{{ blockData.content }}</p>
        </div>
        <el-form ref="linkareaForm" :model="linkareaForm">
          <div
            v-for="(item,index) in linkareaForm.advertisingInfo"
            :key="index"
            class="streamerList"
          >
            <div class="hintheadBox">
              <div class="hinthead">第{{ index+1 }}列链接标题</div>
              <el-collapse accordion class="elcollapse">
                <el-collapse-item>
                  <template slot="title">
                    <span class="title">
                      <i class="el-icon-rank" style="font-size:18px"/>
                      第{{ index+1 }}列链接标题-
                      <span>{{ item.bottomText }}</span>
                    </span>
                  </template>
                  <el-form-item label="文本" style="margin-top:22px;">
                    <el-input v-model="item.bottomText" style="width:300px;"/>
                  </el-form-item>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div class="hintheadBox">
              <div class="hinthead">第{{ index+1 }}列链接</div>
              <el-collapse accordion class="elcollapse">
                <el-collapse-item
                  v-for="(val,num) in linkareaForm.advertisingInfo[index].listLink"
                  :key="num"
                >
                  <template slot="title">
                    <span class="title">
                      <i class="el-icon-rank" style="font-size:18px"/>
                      第{{ index+1 }}列链接标题-
                      <a
                        href="#"
                        style="color: #428bca;"
                        target="_Blank"
                      >{{ val.linkText }}</a>
                      <el-button
                        icon="el-icon-delete"
                        circle
                        size="mini"
                        style="float:right;margin:8px;"
                        @click="delLinkList(index,num,$event)"
                      />
                    </span>
                  </template>
                  <el-form-item label="链接文本" style="margin-top:22px;">
                    <el-input v-model="val.linkText" style="width:500px;"/>
                  </el-form-item>
                  <el-form-item label="链接地址">
                    <el-input v-model="val.linkAddress" style="width:500px;"/>
                  </el-form-item>
                  <el-form-item label="打开新窗口">
                    <el-radio v-model="val.radio" label="yes">是</el-radio>
                    <el-radio v-model="val.radio" label="no">否</el-radio>
                  </el-form-item>
                </el-collapse-item>
              </el-collapse>
              <el-button
                icon="el-icon-circle-plus"
                style="width:900px;margin-top:5px;"
                @click="addcollapse(index)"
              >新增</el-button>
            </div>
          </div>
          <!-- 底部Logo -->
          <div class="hintheadBox">
            <div class="hinthead">底部Logo</div>
            <div class="suggest">建议图片尺寸为233×64px</div>
            <el-collapse accordion class="elcollapse">
              <el-collapse-item>
                <template slot="title">
                  <span class="title">
                    <i class="el-icon-rank" style="font-size:18px"/>
                    底部Logo
                    <a
                      :href="linkareaForm.bottomLogo.url"
                      target="_Blank"
                    >
                      <i class="header-icon el-icon-picture"/>
                    </a>
                    <a
                      href="#"
                      style="color: #428bca;"
                      target="_Blank"
                    >{{ linkareaForm.bottomLogo.describe }}</a>
                  </span>
                </template>
                <el-form-item label="图片" class="labelWidth" style="margin-top:22px;">
                  <el-input v-model="linkareaForm.bottomLogo.url" style="width:300px;"/>
                  <el-upload
                    :on-change="bottomLogoUpload"
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    style="display:inline-block"
                  >
                    <el-button size="small" type="primary">上传</el-button>
                  </el-upload>
                </el-form-item>
                <el-form-item label="图片描述">
                  <el-input v-model="linkareaForm.bottomLogo.describe" style="width:300px;"/>
                </el-form-item>
                <el-form-item label="图片链接">
                  <el-input v-model="linkareaForm.bottomLogo.link" style="width:300px;"/>
                </el-form-item>
                <el-form-item label="背景色填充">
                  <el-color-picker v-model="linkareaForm.bottomLogo.backgroundColor" size="small"/>
                </el-form-item>
                <el-form-item label="打开新窗口">
                  <el-radio v-model="linkareaForm.bottomLogo.radio" label="yes">是</el-radio>
                  <el-radio v-model="linkareaForm.bottomLogo.radio" label="no">否</el-radio>
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </div>
          <!-- 底部微博 -->
          <div class="hintheadBox">
            <div class="hinthead">底部微博链接</div>
            <div class="suggest">填入网校的微博首页地址</div>
            <el-collapse accordion class="elcollapse">
              <el-collapse-item>
                <template slot="title">
                  <span class="title">
                    <i class="el-icon-rank" style="font-size:18px"/>
                    底部微博链接-
                    <a
                      href="#"
                      style="color: #428bca;"
                      target="_Blank"
                    >{{ linkareaForm.bottomWeibo.linkText }}</a>
                  </span>
                </template>
                <el-form-item label="链接文本" style="margin-top:22px;">
                  <el-input v-model="linkareaForm.bottomWeibo.linkText" style="width:300px;"/>
                </el-form-item>
                <el-form-item label="链接地址">
                  <el-input
                    v-model="linkareaForm.bottomWeibo.linkAddress"
                    placeholder="http://"
                    style="width:300px;"
                  />
                </el-form-item>
                <el-form-item label="打开新窗口">
                  <el-radio v-model="linkareaForm.bottomWeibo.radio" label="yes">是</el-radio>
                  <el-radio v-model="linkareaForm.bottomWeibo.radio" label="no">否</el-radio>
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div v-for="(list,sign) in linkareaForm.thirdParty" :key="sign+ 'c'" class="hintheadBox">
            <div class="hinthead">底部{{ list.title }}下载二维码</div>
            <div class="suggest">上传网校的{{ list.title }}二维码</div>
            <el-collapse accordion class="elcollapse">
              <el-collapse-item>
                <template slot="title">
                  <span class="title">
                    <i class="el-icon-rank" style="font-size:18px"/>
                    底部{{ list.title }}
                    <a :href="list.url" target="_Blank">
                      <i class="header-icon el-icon-picture"/>
                    </a>
                  </span>
                </template>
                <el-form-item label="图片" class="labelWidth" style="margin-top:22px;">
                  <el-input v-model="list.url" style="width:300px;"/>
                  <el-upload
                    :on-change="thirdPartyChange"
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    style="display:inline-block"
                  >
                    <el-button size="small" type="primary" @click="thirdPartyUpload(sign)">上传</el-button>
                  </el-upload>
                </el-form-item>
                <el-form-item label="图片描述">
                  <el-input v-model="list.describe" style="width:300px;"/>
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </div>
          <el-button type="primary" style="margin:20px">保存设置</el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="历史记录" name="2">
        <div v-if="activeName === '2'">
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="createTimeStr" label="修改时间" min-width="20" align="center"/>
            <el-table-column prop="userName" label="修改用户" min-width="10" align="center"/>
            <el-table-column prop="manage" label="操作" min-width="20" align="center">
              <template slot-scope="scope">
                <el-button type="primary" @click="preview(scope.row)">预览</el-button>
                <el-button type="success" @click="recovery(scope.row)">恢复此内容</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
// import Sortable from 'sortablejs'
export default {
  data() {
    return {
      activeName: '1',
      thirdPartyIndex: 0,
      blockData: {
        content: '简墨主题: 首页底部.链接区域'
      },
      linkareaForm: {
        advertisingInfo: [
          {
            bottomText: '底部区域',
            listLink: [
              {
                linkText: '修改底部链接',
                linkAddress: 'http://www.qiqiuyu.com/faq/533/detail',
                radio: 'yes'
              },
              {
                linkText: '好知网与课程存档',
                linkAddress: 'http://www.qiqiuyu.com/faq/533/detail',
                radio: 'yes'
              },
              {
                linkText: '修改底部链接',
                linkAddress: 'http://www.qiqiuyu.com/faq/533/detail',
                radio: 'yes'
              }
            ]
          },
          {
            bottomText: '底部区域',
            listLink: [
              {
                linkText: '修改二维码和logo',
                linkAddress: 'http://www.qiqiuyu.com/faq/533/detail',
                radio: 'yes'
              },
              {
                linkText: '好知网与课程存档',
                linkAddress: 'http://www.qiqiuyu.com/faq/533/detail',
                radio: 'yes'
              },
              {
                linkText: '修改底部链接',
                linkAddress: 'http://www.qiqiuyu.com/faq/533/detail',
                radio: 'yes'
              }
            ]
          }
        ],
        // 底部Logo
        bottomLogo: {
          url: 'file/img',
          describe: '图片1的描述',
          link: 'a',
          backgroundColor: '#1d75ed',
          radio: 'yes',
          text: '百名学霸，个性化匹配',
          content: '3980元=3个月6次咨询+答疑',
          fileList: []
        },
        // 底部微博
        bottomWeibo: {
          linkText: '微博首页',
          linkAddress: 'http://weibo.com/edusoho',
          radio: 'yes'
        },
        thirdParty: [
          {
            title: '微信公众号',
            url: 'file/img',
            describe: '图片1的描述',
            fileList: []
          },
          {
            title: 'iOS版APP',
            url: 'file/img',
            describe: '图片1的描述',
            fileList: []
          },
          {
            title: 'Android版APP',
            url: 'file/img',
            describe: '图片1的描述',
            fileList: []
          }
        ]
      },
      tableData: [
        {
          createTimeStr: '2019-03-06',
          userName: 'testedu'

        }
      ]
    }
  },
  mounted() {
    // this.setSort()
  },
  methods: {
    // setSort() {
    //   // 拖拽排序
    //   const _this = this
    //   const el = document.querySelectorAll('.hintheadBox .elcollapse')[1]
    //   console.log(el)
    //   Sortable.create(el, {
    //     onEnd(evt) {
    //       let templateData = ''
    //       evt.to.childNodes.forEach(childNode => {
    //         templateData += childNode.id.substring(childNode.id.length - 1) + ','
    //       })
    //       templateData = templateData.substring(0, templateData.length - 1)
    //       _this.templateData = templateData
    //     }
    //   })
    // },
    getlistIndex(index) {
      this.uploadIndex = index
    },
    handleChange(file, fileList) {
      this.linkareaForm.advertisingInfo[this.uploadIndex].url = file.url
    },
    // 新增列表
    addcollapse(index) {
      const collapseList = this.linkareaForm.advertisingInfo[index].listLink
      if (collapseList.length >= 5) {
        this.$message({
          type: 'error',
          message: '最多只能添加5个！'
        })
        return
      }
      var newcollapse = { linkText: '', linkAddress: '', radio: 'yes' }
      collapseList.push(newcollapse)
      console.log(collapseList)
    },
    // 删除列表事件
    delLinkList(index, num, e) {
      e.stopPropagation()
      const listLink = this.linkareaForm.advertisingInfo[index].listLink
      if (listLink.length <= 1) {
        this.$message({
          type: 'warning',
          message: '最少要有一项哦'
        })
        return
      }
      listLink.splice(num, 1)
    },
    // 底部logo图片上传图片事件
    bottomLogoUpload(file, fileList) {
      this.linkareaForm.bottomLogo.url = file.url
      this.linkareaForm.bottomLogo.fileList = fileList.slice(-1)
    },
    // 第三方微信、ios、android图片上传
    thirdPartyUpload(index) {
      this.thirdPartyIndex = index
    },
    thirdPartyChange(file, fileList) {
      const tplist = this.linkareaForm.thirdParty[this.thirdPartyIndex]
      tplist.url = file.url
      tplist.fileList = fileList.slice(-1)
    }
  }
}
</script>
<style lang="scss">
.lunbo-edit {
  padding: 0 20px;
  .el-tabs__item {
    font-size: 16px;
  }
  .hintheadBox {
    .el-form-item__label {
      width: 300px;
    }
  }
  .subhead {
    background-color: #f8f8f8;
    width: 100%;
    height: 40px;
    line-height: 40px;
    p {
      margin: 0;
      box-sizing: border-box;
      padding-left: 20px;
    }
  }
  .streamerList {
    margin-bottom: 40px;
  }
  .hintheadBox {
    padding: 0 20px;
    .hinthead {
      font-weight: 700;
      margin-top: 20px;
    }
    .suggest {
      color: #999;
    }
    .elcollapse {
      width: 900px;
      margin-top: 20px;
    }
    .el-collapse-item__header {
      background-color: #f0f3ff;
    }
    .el-collapse-item__header.is-active {
      background-color: #e4fafd;
    }
    .el-collapse-item__header .title {
      font-size: 16px;
      padding: 0 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .el-upload-list {
      display: none;
    }
  }
}
</style>
